import {
  ApiOutlined,
  AppstoreOutlined,
  ConsoleSqlOutlined,
  DeleteOutlined,
  EditOutlined,
  GroupOutlined,
  JavaScriptOutlined,
  MailOutlined,
  MenuOutlined,
  MoreOutlined,
  SettingOutlined,
  WindowsOutlined,
} from "@ant-design/icons";
import {
  Button,
  Card,
  Col,
  Dropdown,
  Layout,
  Menu,
  Row,
  Space,
  Spin,
  message,
} from "antd";
import React from "react";
import { PlusOutlined } from "@ant-design/icons";
import { ProCard, ProLayout } from "@ant-design/pro-components";
import SaveApiGroup from "./components/SaveApiGroup";
import { useRequest } from "ahooks";
import { createApi, queryApiGroup } from "../../../../api";
import { Outlet, useNavigate, useParams } from "react-router-dom";

const App = () => {
  const urlParams = useParams();

  const { data, refresh, loading } = useRequest<any, any>(
    () => queryApiGroup(urlParams),
    {}
  );
  const nav = useNavigate();
  const formatResult = (data: any) => {
    if (!data) {
      return [];
    }
    
    for (let i = 0; i < data.length; i++) {
      data[i].label = data[i].name;
      data[i].key = data[i].id;
      data[i].icon = <ApiOutlined />;
      let children = data[i].children||[];
      for (let k = 0; k < children.length; k++) {
        children[k].label = children[k].name;
        children[k].key = children[k].id;
      }
    }
    return data;
  };
  const onAddJsApi = async (item) => {
    console.log("itemitem", item);
    await createApi({
      name: `newApi`,
      path: "",
      prefix:'',
      suffix:'',
      hideInMenu:false,
      fullScreen:false,
      postScript: [],
      groupId: item.id,
      projectId: urlParams.projectId,
      preScript: [],
    });
    message.success("添加成功");
    refresh();
  };
  console.log("datadata", urlParams);
  return (
    <Layout>
      <Layout.Sider width={250} style={{ marginRight: 10 }}>
        <ProCard
          headerBordered
          ghost
          bordered={false}
          size="small"
          extra={
            <SaveApiGroup>
              <Button type="link">添加分组</Button>
            </SaveApiGroup>
          }
          title={
            <Space>
              <WindowsOutlined />
              分组列表
            </Space>
          }
        >
          <Spin spinning={loading}>
            <Menu
              theme="light"
              itemIcon={() => <DeleteOutlined />}
              onClick={(e) => {
                nav(`/apiManage/${urlParams.projectId}/api/${e.key}`);
              }}
              expandIcon={(e2) => {
                return (
                  <div
                    onClick={(e) => {
                      // console.log("eeee", e, e2);
                      e.stopPropagation();
                    }}
                  >
                    <Dropdown
                      menu={{
                        itemIcon: false,
                        items: [
                          {
                            label: "添加API接口(JS)",
                            onClick: () => onAddJsApi(e2),
                            icon: <JavaScriptOutlined />,

                            key: "000",
                          },
                          {
                            label: "添加API接口(SQL)",
                            icon: <ConsoleSqlOutlined />,
                            key: "22",
                          },
                          {
                            type: "divider",
                          },
                          {
                            label: (
                              <SaveApiGroup refresh={refresh} payload={e2}>
                                <span>编辑分组</span>
                              </SaveApiGroup>
                            ),
                            icon: <EditOutlined />,
                            key: "11",
                          },
                          {
                            type: "divider",
                          },
                          {
                            label: "删除",
                            danger: true,
                            icon: <DeleteOutlined />,
                            key: "33",
                          },
                        ],
                      }}
                    >
                      <a onClick={(e) => e.preventDefault()}>
                        <MoreOutlined />
                      </a>
                    </Dropdown>
                  </div>
                );
              }}
              // expandIcon={false}
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              mode="inline"
              items={formatResult(data)}
            />
          </Spin>
        </ProCard>
      </Layout.Sider>
      <Layout.Content>
        <Outlet context={{ refresh }} />
      </Layout.Content>
    </Layout>
  );
};
export default App;
